<template>
	<div>
		<div>
			<div class="exchange_success">
				<div class="okImg"><img src="../../images/ok.gif"></div>
				<p v-if="!$route.query.buy">恭喜，兑换成功</p>
				<p v-if="$route.query.buy">恭喜，购买成功</p>
				<span v-if="couponParam.couponType=='present'">礼品券已经放入您的商券，请去<br/>我的商券里查看</span>
				<span v-if="couponParam.couponType=='ticket'">票务已经放入您的商券，请去<br/>我的商券里查看</span>
				<span v-if="couponParam.couponType=='cash'">代金券已经放入您的商券，请去<br/>我的商券里查看</span>
				<span v-if="couponParam.couponType=='rebate'">折扣券已经放入您的商券，请去<br/>我的商券里查看</span>
				<span v-if="couponParam.couponType=='voucher'">抵用券已经放入您的商券，请去<br/>我的商券里查看</span>
				<a v-if='!$route.query.scanState&&!$route.query.tlrNo' @click="$router.push({name: 'home'})">返回首页</a>
				<a v-if='$route.query.scanState||$route.query.tlrNo' @click="gobuy">返回付款</a>
				<div class="gap"></div>
			</div>
			<div class="exchange_card">
				<div class="exchange" id="exchange" v-show="exChanged">
					<div class="back_card">
						<span v-if="!$route.query.buy" class="left">兑换详情</span>
						<span v-if="$route.query.buy" class="left">购买详情</span>
					</div>
					<div class="cardBg">
						<div class="cardBg_tit">
							<span class="cardBg_tit_num_font">{{exCardInfo.theShow}}</span>
							<span class="cardBg_tit_num">{{exCardInfo.paySum}}</span>
							<span class="cardBg_tit_font">芸券</span>
						</div>
						<div class="cardBg_cop">
							<div class="couponDiv">
								<coupon-denomination :item="exCardInfo"></coupon-denomination>
							</div>
							<div class="cop_left left">
								<div class="cop_left_left">
									<p>估值{{exCardInfo.cardValuetion}}芸券兑换</p>
									<span>{{exCardInfo.name}}</span>
								</div>
								<span class="cop_left_right">X{{exCardInfo.useCardNum}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="buyCard"><div>
					<div class="back_card">
						<span v-if="!$route.query.buy" class="left">兑换所得商券</span>
						<span v-if="$route.query.buy" class="left">购买所得商券</span>
						<a @click="lookCard" class="right">查看我的商券<em class="iconfont icon-right right"></em></a>
					</div>
					<div class="cardBg1" @click="goCouponDetl(couponParam)">
	                <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
	                <div class="cardBg2">
	                    <div class="card_tit clearfix">
	                        <span class="right">有效期：{{couponParam.validatyEnd | strDate(3)}}</span>
                            <p>{{couponParam.mchtName}}</p>
	                    </div>
											<div class="couponDiv">
												<coupon-denomination :item="couponParam"></coupon-denomination>
											</div>
	                    <div class="card_info">
	                        <div class="card_name">{{couponParam.couponName}}</div>
	                        <div class="coupon_info_item">
								<star :couponComScore="couponParam.comScore"></star>
								<p class="info_pad">{{couponParam.comNum}}条</p>
	                        </div>

	                        <div class="coupon_info_item color_gray">
	                        	<img v-if="$route.query.buy" style="width: 1rem;height: 1rem;" src="../../images/cashIcon.png"/>
	                            已售出   {{couponParam.soldnum}}   &nbsp;&nbsp;&nbsp;已使用   {{couponParam.usednum}}
	                        </div>
	                    </div>
	                </div>
					<a class="card_btn">
					  <span class="left">使用须知</span>
					  <em class="iconfont icon-right right"></em>
					</a>
	            </div>
				</div></div>
            </div>
		</div>
	</div>
</template>
<script>
	import star from '../../componentes/global/star.vue'
	import * as types from '../../vuex/types.js'
  import getData from '../../service/getData.js'
	import { mapState } from 'vuex'
	import {Storage} from 'src/utils/storage.js'

	export default{
	    data(){
	        return{
                couponParam:{},
                lookState:false,
                exCardInfo:{},
                exChanged:true,
                lookState:false
			}
		},
		components: {
            // cardImg,
            star
		},
		  mounted: function() {
    var _this=this;
    this.$nextTick(function() {
    })
  },
		methods:{
            goCouponDetl(params){
            	var me =this;
                Storage.set("couponInfo",params);
                me.lookState=true
                this.$router.push({
		          name:'couDetail',
		          query: {
		            type:'noExchange',
		            couponId: params.couponId,
		            mchtId: params.mchtId,
		            seq: params.seqNo||'',
		            usrId: '',
		            usrPicId: ''
		          }
		        });
                this.lookState=true;
            },
            lookCard(){
            	this.$router.push({name:"cardList"});
            	this.lookState=true;
            },
            gobuy(){
            	 this.lookState=true
            	this.$router.push({path:"/positiveScan",query:{
            		m:Storage.get('positiveScan',true).mchtId,
            		tlrNo:this.$route.query.tlrNo,
            		inputAmt:this.$route.query.inputAmt,
            		inputNoSlae:this.$route.query.inputNoSlae,
            		inputDeskNum:this.$route.query.inputDeskNum,
            		gobuy:true,
            	}});
            }
		},
	 computed: {

			},
        created:function(){
            let me =this;
            //电子券详情
            var route  = this.$route.query,
                store  = Storage.get("couponInfo");

            me.param = {
                couponId:store.couponId || route.c,
                mchtId:store.mchtId  		 || route.m,
                seqNo:store.id       	|| store.seqNo   || route.s     || '',
                usrId:store.usrId    	|| store.sellUsr || route.u     || '',
                usrPicId:store.usrPicId || route.ui || 0
            };
            getData.getCouponInfo({"method":'post',data:{"couponId":me.param.couponId,"mchtId":me.param.mchtId,"seqNo":me.param.seqNo,"usrId":me.param.usrId, "usrPicId":me.param.usrPicId}}).then(rep => {
                me.couponParam = rep.content;
                 console.log(me.couponParam.couponType)
            });

			//用此券来兑换，此券的信息
            this.exCardInfo=this.$route.query.exCardInfo || Storage.get("exCardInfo");
            console.log('local'+Storage.get("exCardInfo"))
            if((this.exCardInfo.useCardNum==0) || (!this.exCardInfo.useCardNum)){
				this.exChanged=false;
			}
        },
          beforeRouteLeave(to, from, next) {
				  	if(window.isBack){
				  		window.isBack =false
				  		this.$router.push({path:"/home"})
				  	}
					next()
				  },
//		beforeDestroy(){
//		if(this.$route.query.tlrNo){
//		alert(this.$route.query.tlrNo)
//			alert(1)
//		}
//		   else	if(!this.$route.query.tlrNo){
//		   	alert(this.$route.query.tlrNo)
//		   }else if(!this.lookState) {
//		   alert(3)
////				this.$router.push({name:"home"})
//			}
//
//		}
	}
</script>
<style scoped>
	.info_pad{line-height: 1.4rem;height: 1.2rem;}
	.exchange_card .cardBg{ height: 8.1rem; background:#fff;padding-left:1rem;}
	.cardBg_tit{height:2.3rem;border-bottom:1px solid #e6e6e6;line-height:2.3rem;}
	.cardBg_tit .cardBg_tit_num{color:#ec4e8a;font-size:1.4rem;font-weight:700;}
	.cardBg_tit .cardBg_tit_font{color:#333;}
	.cardBg_tit_num_font{color:#333;}
	.cardBg_cop{height:5.8rem;position:relative;}
	.cop_left_left{margin:1rem 0 0 0.6rem;color:#333;}
	.cop_left_left p{font-weight:bold;margin:.3rem 0;}
	.cop_left_left span{color:#666;}
	.cop_left_right{position:absolute;right:.667rem;top:2.5rem;color:#333;font-weight:bold}
	.cardBg_cop .cop_right{position:absolute;right:.667rem;}
	.exchange_card{position: relative;background:#fff;padding:0;}
	.card_btn{bottom:.6rem;line-height: 3.2rem;}
	.okImg{margin: 0.5rem auto;}
	.exchange_success a{margin:1rem auto 2rem;}
	.exchange{height:11.6rem;background:#ec4e8a;padding: 0 .667rem .667rem;}
	.buyCard{height:16.4rem;background:#ec4e8a;padding: 0 .667rem .667rem;}
</style>
